<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #tae {
        border: 1px solid red;
        margin: auto;
        border-collapse: collapse;
    }

    tr,
    th,
    td {
        width: 150px;
        height: 40px;
        text-align: center;
        border-bottom: 1px solid red;
    }

    #but1,
    #but2 {
        width: 100px;
        height: 40px;
    }

    #but1 {
        margin-left: 850px;
        margin-top: 20px;
    }
</style>

<body>
    <table id="tae">
        <tr>
            <th><input type="checkbox" id="int"></th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tbody>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>熊大</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>熊二</td>
                <td>男</td>
                <td>16</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>光头强</td>
                <td>男</td>
                <td>35</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>翠花</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>李老板</td>
                <td>男</td>
                <td>42</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>吉吉国王</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="a"></td>
                <td>毛毛</td>
                <td>男</td>
                <td>17</td>
            </tr>
        </tbody>

    </table>
    
</body>
<script>
    window.onload = function () {
        var boxObj = document.getElementsByName('a')
        document.getElementById('int').addEventListener('change', function () {
            // console.log(this.checked);
            for (let i = 0; i < boxObj.length; i++) {
                boxObj[i].checked = this.checked
            }
        })

        for (let j = 0; j < boxObj.length; j++) {
            boxObj[j].addEventListener('change', function () {
                var flag = true
                for (let l = 0; l < boxObj.length; l++) {
                    if (!boxObj[l].checked) {
                        flag = false
                    }
                }
                document.getElementById('int').checked = flag
            })
        }

    }



    // window.onload = function () {
    //   //全选复选框

    //   //tbody内的复选框
    //   var boxObj = document.getElementsByName('a')
    //   //给全选框 绑定值改变事件
    //   document.getElementById('int').addEventListener('change', function () {
    //     //循环普通的复选框 将普通的复选框值和全选的复选框值保持一致
    //     for (let i = 0; i < boxObj.length; i++) {
    //       boxObj[i].checked = this.checked
    //     }
    //   })
    //   //子复选框
    //   //循环所有的子复选框
    //   for (let i = 0; i < boxObj.length; i++) {
    //     //给每个子复选框 加上绑定值改变事件
    //     boxObj[i].addEventListener('change', function () {
    //       var flag = true //声明定义 默认为true
    //       //循环每一个子复选框
    //       for (let j = 0; j < boxObj.length; j++) {
    //         //判断 只要有一个为 没选中 false
    //         if (!boxObj[j].checked) {
    //           flag = false
    //         }
    //       }
    //       //最后把值给到 全选框
    //       document.getElementById('all').checked = flag;
    //     })
    //   }
    // }
</script>

</html>